<template>
	<view class="detail">
		<view class="pic">
			<image :src="snack.imageValue" mode="aspectFill">
		</view>

		<view class="des">
			<view class="desitem1">${{snack.price}}</view>
			<view class="desitem2">{{snack.name}}</view>
			<view class="desitem3">单个售卖</view>
			<view class="desitem4">
				<text>銷量:{{snack.sales}}</text>
				<text>库存:{{snack.inventory}}</text>
			</view>
			<view class="desitem5">积分</view>
		</view>

		<u-tabs
		:list="list1"
		lineWidth="30" 
		style="width: 100%;"
		@click="changetab"
		></u-tabs>
		<view class="record" v-for="item in recordList" :key="item._id" v-show="tab==1">
			<view class="pic">
				<image :src="item.user_id[0].avatar"></image>
			</view>

			<view class="nickname">
				<text>{{item.user_id[0].nickname}}</text>
			</view>

			<view class="number">
				<text>{{item.order_id[0].number}}份</text>
			</view>

			<view class="time">
				<text>{{Time(item.buyTime)}}</text>
			</view>
		</view>



		<view class="foot">
			<u-icon name="home" size="28" class="footitem1" @click="goIndex()"></u-icon>
			<u-icon name="shopping-cart" size="28" class="footitem2" @click="goCart()"></u-icon>
			<u-button type="warning" text="加入购物车" shape class="footitem3" @click="show=true"></u-button>
			<u-button type="error" text="立即购买" shape class="footitem4" @click="show2=true"></u-button>
		</view>

		<u-popup :show="show" mode="bottom" @close="close" @open="open" class="popup">
			<view class="box1">
				<view class="pic">
					<image :src="snack.imageValue"></image>
				</view>
				<view class="des">
					<text>￥{{snack.price}}</text>
					<text>库存无限制</text>
				</view>
			</view>
			<u-button type="warning" text="加入购物车" shape @click="addNumber(user_id,snack._id,1)"></u-button>
		</u-popup>

		<u-popup :show="show2" mode="bottom" @close="close" @open="open" class="popup">
			<view class="box1">
				<view class="pic">
					<image :src="snack.imageValue"></image>
				</view>
				<view class="des">
					<text>￥{{snack.price}}</text>
					<text>库存无限制</text>
				</view>

			</view>
			<view class="box2">
				<text>购买数量</text>
				<u-number-box v-if="paysList.length" :min="0" v-model="paysList[0].number"
					@plus="valChange(user_id,_id,1)" @minus="valChange(user_id,_id,-1)"></u-number-box>
			</view>
			<u-button type="error" text="立即购买" shape @click="pay()"></u-button>
		</u-popup>

	</view>
</template>

<script>
	import {timeInterval} from "../../utils/time.js"
	const db = uniCloud.database();
	const dbCmd = db.command;
	const cloudShoppingCarts = uniCloud.importObject("shoppingCarts");
	const cloudType = uniCloud.importObject("type");
	const cloudSnacks = uniCloud.importObject("snacks");
	const CloudRecord = uniCloud.importObject("buyRecord");
	const CloudUser = uniCloud.importObject("users")
	export default {
		data() {
			return {
				user_id: "",
				_id: null,
				snack: "",
				show: false,
				show2: false,
				paysList: [],
				recordList: [],
				tab:0,
				list1: [{
					name: '商品详情',
				},{
					name: '购买记录',
				},{
					name: '评论',
				}]
			};
		},
		onLoad(e) {
			console.log(timeInterval(Date.now()));
			console.log(e);
			this._id = e._id;
			this.user_id = uni.getStorageSync("uni-id-pages-userInfo")._id;
			Promise.all([this.getBuyReCord(), this.getSnackBY_id(), this.getShoppingCart()])

		},
		onShow() {

		},
		computed:{
			Time(){
			  return (time)=>{
			       return  timeInterval(time)
			    };
			}
		},
		methods: {
			changetab(index){
				this.tab=index.index
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				this.show2 = false
				// console.log('close');
			},
			async addNumber(user_id, snack_id, value) {
				cloudShoppingCarts.addCartNumber(user_id, snack_id, value).then(res => {
					console.log(res);
					this.show = false
				})
			},
			goIndex() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},

			goCart() {
				uni.switchTab({
					url: "/pages/shoppingCarts/shoppingCarts"
				})
			},
			getSnackBY_id() {
				cloudSnacks.getSnackBY_id(this._id).then(res => {
					console.log(res);
					this.snack = res.data[0];
				})
			},
			async getShoppingCart() {
				const m = await db.collection("shoppingCarts").where({
					user_id: this.user_id,
					snack_id: this._id
				}).field("user_id,snack_id,number,checked").get();
				console.log(m);
				if (!m.result.data.length) {
					this.valChange2(this.user_id, this._id)
				}
				let obj = {
					number: 0
				};
				let b = db.collection("Snacks").getTemp();
				let a = db.collection("shoppingCarts").where({
					user_id: this.user_id,
					snack_id: this._id
				}).field("user_id,snack_id,number,checked").getTemp();
				let res = await db.collection(a, b).get();
				console.log(res.result.data)
				this.paysList = res.result.data;
			},
			pay() {
				uni.navigateTo({
					url: `/pages/order/checkOrder/checkOrder?&paysList=${JSON.stringify(this.paysList)}`
				})
			},
			valChange(user_id, snack_id, value) {
				cloudShoppingCarts.addCartNumber(user_id, snack_id, value).then(res => {
					console.log(res);
				})
			},
			valChange2(user_id, snack_id, value) {
				cloudShoppingCarts.EmptyShoppingCart(user_id, snack_id).then(res => {
					console.log(res);
				})
			},
			async getBuyReCord() {
				let a = db.collection("buyRecord").field("user_id,snack_id,order_id,buyTime").getTemp()
				let b = db.collection("Snacks").where({
					_id: this._id
				}).getTemp();
				let c = db.collection("uni-id-users").field("_id,avatar,nickname").getTemp();
				let d = db.collection("order").field("_id,number,total").getTemp();
				let res = await db.collection(a, b, c, d).get();
				console.log(res);
				if (res.result.data.length != 0) {
					if (res.result.data[0].snack_id.length != 0) {
						this.recordList = res.result.data
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.popup {
		width: 100%;

		.box1 {
			width: 100%;
			display: flex;

			.pic {
				image {
					width: 150rpx;
					height: 150rpx;
				}
			}

			.des {
				width: 50%;
				height: 150rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}
		}

		.box2 {
			padding: 10rpx 20rpx;
			height: 600rpx;
			display: flex;
			justify-content: space-between;
		}
	}

	.detail {
		.pic {
			box-sizing: content-box;
			padding: 20rpx;
			width: var(--status-bar-width);

			image {
				width: 100%;
				height: 720rpx;
			}
		}

		.des {
			width: 100%;
			padding: 0 20rpx;

			.desitem1 {
				font-size: 50rpx;
				color: red;
			}

			.desitem2 {
				margin-top: 10rpx;
				font-size: 40rpx;
			}

			.desitem3 {
				margin-top: 10rpx;
				font-size: 30rpx;
				color: rebeccapurple;
			}

			.desitem4 {
				margin-top: 10rpx;
				font-size: 30rpx;
				display: flex;
				justify-content: space-around;
			}

			.desitem5 {
				margin-top: 10rpx;
				font-size: 30rpx;
			}
		}

		.record {
			margin-top: 10rpx;
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			border-bottom: 1rpx solid gray;

			.pic {
				width: 100rpx;
				height: 100rpx;

				image {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}

		.foot {
			box-sizing: content-box;
			padding-left: 20rpx;
			width: 100%;
			height: 100rpx;
			position: fixed;
			bottom: var(--window-bottom, 20rpx);
			align-items: center;
			display: flex;

			// justify-content: space-between;
			.footitem3 {
				width: 270rpx;
			}

			.footitem4 {
				width: 270rpx;
			}
		}
	}
</style>